<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>职位</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link rel="stylesheet" href="../../common/css/bootstrap.css" type="text/css">
        <link href="../../common/css/nice-select.css" rel="stylesheet">
        <link href="../../common/css/style.css" rel="stylesheet">
        <link rel="stylesheet" href="../../common/css/layui.css">
        <script src="../js/jquery-3.6.0.js"></script>
        <script src="../js/bootstrap.js"></script>
        <script src="../js/commons.js"></script>
        <script src="../../common/js/layui.js"></script>
        <link href="//unpkg.com/layui@2.7.6/dist/css/layui.css" rel="stylesheet">
        <style type="text/css">
            .head1 {
                border-radius: 90px;
                font-size: 20px;
                border: 1px cadetblue solid;

                text-align: right;
            }

            .head {
                width: auto;
                height: 60px;
                border: 1px solid cadetblue;
                text-align: right;
            }

            .barcon {
                width: 1000px;
                margin: 0 auto;
                text-align: center;
            }

            .barcon2 {
                float: right;
            }

            .barcon2 ul {
                margin: 20px 0;
                padding-left: 0;
                list-style: none;
                text-align: center;
            }

            .barcon2 li {
                display: inline;
            }

            .barcon2 a {
                font-size: 16px;
                font-weight: normal;
                display: inline-block;
                padding: 5px;
                padding-top: 0;
                color: black;
                border: 1px solid #ddd;
                background-color: #fff;
            }

            .barcon2 a:hover {
                background-color: #eee;
            }

            .ban {
                opacity: .4;
            }

            .name1 {
                margin-left: 5px;
            }

            .button {
                display: inline;
                margin-left: 50px;
            }

            .address, .cname {
                display: inline-block;
                width: 100px;
                margin-left: 20px;
                font-size: 13px;
            }

            .salary {
                margin-left: 100px;
                font-size: 13px;
                color: #F85A4E;
            }

            .type {
                margin-left: 100px;
                font-size: 13px;
            }

            .jname {
                font-size: 16px;
                margin-left: 20px;
            }

            .jobitem {
                margin: 20px 60px 10px;
                border-radius: 10px;
                width: 350px;
                height: 150px;
                background-color: #FFFFFF;
                cursor: pointer;
                padding: 5px;
            }

            .jobitem:hover .jname {
                color: #00a6a7;
            }

            .jobitem:hover {
                box-shadow: 0 16px 40px 0 rgb(138 149 158 / 20%);
            }
            
            #showData {
                width: 80%;
                margin: 20px auto;
                display: flex;
                justify-content: center;
                flex-wrap: wrap-reverse;
            }
            
            .search {
                width: 75%;
                margin: 20px auto;
                font-size: 20px;
                line-height: 27px;
            }
        </style>
    </head>
    <body>
        <div class="head">
            <ul class="layui-nav layui-bg-green">
                <li class="layui-nav-item"><a href="main.html">首页</a></li>
                <li class="layui-nav-item"><a href="defaultJob.html">职位</a></li>
                <li class="layui-nav-item"><a href="../../common/html/resume.html">简历</a></li>
                <li class="layui-nav-item" onclick="chat()">
                    <a href="javascript:;">消息</a>
                </li>
                <li class="layui-nav-item">
                    <div style="cursor: pointer">
                        <span class="head1 state" id="aa" onclick="login()">登录</span>
                        <span class="head1 state1" id="aaa" onclick="toUserPage()" style="display: none"></span>
                    </div>
                </li>
            </ul>
        </div>
        <br><br>
        <div class="search">
            <label class="name1">岗位类型：</label>
            <select id="type" name="type">
                <option value="">请选择</option>
            </select>
            <label style="display: inline;" class="name1">岗位地址: </label>
            <div style="display: inline">
                <input type="text" id="area" name="address">
            </div>
            <label style="display: inline;" class="name1">岗位名: </label>
            <div style="display: inline">
                <input type="text" id="area1" name="jname">
            </div>
            <label style="display: inline;" class="name1">薪资范围: </label>
            <div style="display: inline;">
                <select id="minSalary" name="minSalary">
                    <option value="">请选择</option>
                    <option value="1000">1000</option>
                    <option value="2000">2000</option>
                    <option value="3000">3000</option>
                    <option value="4000">4000</option>
                    <option value="5000">5000</option>
                    <option value="6000">6000</option>
                    <option value="7000">7000</option>
                    <option value="8000">8000</option>
                    <option value="9000">9000</option>
                    <option value="10000">10000</option>
                    <option value="11000">11000</option>
                    <option value="12000">12000</option>
                    <option value="13000">13000</option>
                    <option value="14000">14000</option>
                    <option value="15000">15000</option>
                    <option value="16000">16000</option>
                    <option value="17000">17000</option>
                    <option value="18000">18000</option>
                    <option value="19000">19000</option>
                    <option value="20000">20000</option>
                    <option value="21000">21000</option>
                    <option value="30000">30000</option>
                    <option value="40000">40000</option>
                    <option value="50000">50000</option>
                    <option value="60000">60000</option>
                    <option value="70000">70000</option>
                    <option value="80000">80000</option>
                    <option value="90000">90000</option>
                </select>
                <span>-</span>
                <select id="maxSalary" name="maxSalary">
                    <option value="">请选择</option>
                    <option value="1000">1000</option>
                    <option value="2000">2000</option>
                    <option value="3000">3000</option>
                    <option value="4000">4000</option>
                    <option value="5000">5000</option>
                    <option value="6000">6000</option>
                    <option value="7000">7000</option>
                    <option value="8000">8000</option>
                    <option value="9000">9000</option>
                    <option value="10000">10000</option>
                    <option value="11000">11000</option>
                    <option value="12000">12000</option>
                    <option value="13000">13000</option>
                    <option value="14000">14000</option>
                    <option value="15000">15000</option>
                    <option value="16000">16000</option>
                    <option value="17000">17000</option>
                    <option value="18000">18000</option>
                    <option value="19000">19000</option>
                    <option value="20000">20000</option>
                    <option value="21000">21000</option>
                    <option value="30000">30000</option>
                    <option value="40000">40000</option>
                    <option value="50000">50000</option>
                    <option value="60000">60000</option>
                    <option value="70000">70000</option>
                    <option value="80000">80000</option>
                    <option value="90000">90000</option>
                </select>
            </div>
            <div class="button">
                <button class="layui-btn layui-btn-md layui-btn-normal" onclick="queryData()">查询</button>
                <button class="layui-btn layui-btn-md layui-btn-normal" onclick="queryCollect()">收藏列表</button>
            </div>
        
        </div>
        <div id="showData">
        
        </div>
        <div id="barcon" class="barcon">
            <div id="barcon2" class="barcon2">
                <ul>
                    <li><a onclick="first()">首页</a></li>
                    <li><a id="prePage" onclick="pre()">上一页</a></li>
                    <li id="barcon1"></li>
                    <li><a id="nextPage" onclick="next()">下一页</a></li>
                    <li><a onclick="end()">尾页</a></li>
                    <li><input type="text" id="num" size="2" oninput="value=value.replace(/[^\d]/g,'')"></li>
                    <li><a id="jumpPage" onclick="jumpPage()">跳转</a></li>
                </ul>
            </div>
        </div>
        <script>
            var INDEX = "http://localhost:8080/recruit/";
            let activeUser;
            $.ajax({
                url: INDEX + "user/info",
                headers: {"token": localStorage.getItem("token")},
                success: function (result) {
                    if (result.code == 0) {
                        activeUser = result.data;
                        if (activeUser == null) {
                            $(".state1").css("display", "none");

                        } else {
                            $(".state").css("display", "none");
                            $(".state1").css("display", "block");
                            $(".state1").text(activeUser.nickname == null ? activeUser.username : activeUser.nickname);
                        }
                    }
                }
            })

            var pageList;
            $(function () {
                initTable(1);
                getAllTypes();
            })

            function pre() {
                initTable(pageList.page - 1);
                if (pageList.page - 1 > 0) {
                    $("#num").val(pageList.page - 1);
                }

            }

            function next() {
                initTable(pageList.page + 1);
                if (pageList.page + 1 <= pageList.pageCount) {
                    $("#num").val(pageList.page + 1);
                } else {
                    $("#num").val(pageList.pageCount);
                }

            }

            function first() {
                initTable(1);
                if (pageList.page - 1 > 0) {
                    $("#num").val(1);
                }
            }

            function end() {
                initTable(pageList.pageCount);
            }

            function initTable(pageNow) {
                if (pageNow == null || pageNow == '' || pageNow == 'undefined') {
                    pageNow = 1;
                }
                $.ajax({
                    url: INDEX + "seeker/job/list?pageNow=" + pageNow,
                    data: {},
                    type: "get",
                    success: function (result) {
                        if (result.code == 0) {
                            pageList = result.data;
                            let a = "";
                            $.each(result.data.data, function (index, ele) {
                                a += '<div class="jobitem"  onclick="detail(' + ele.jid + ')" >';
                                a += '<span class="jname">' + ele.jname + '</span>';
                                a += '<br><br>';
                                a += '<span class="address">' + ele.workAddress + '</span>';
                                a += '<span class="salary">' + ele.minSalary + ' - ' + ele.maxSalary + '</span>';
                                a += '<br><br>';
                                a += '<span class="cname">' + ele.cname + '</span>';
                                a += '<span class="type">' + ele.type + '</span>';
                                a += '</div>';
                            })
                            $("#showData").html(a);
                        }
                    }
                })
            }

            /**
             * 分页函数
             * pno--页数
             * psize--每页显示记录数
             * 分页部分是从真实数据行开始，因而存在加减某个常数，以确定真正的记录数
             * 纯js分页实质是数据行全部加载，通过是否显示属性完成分页功能
             **/
            var pageSize = 10;//每页显示行数
            var currentPage_ = 1;//当前页全局变量，用于跳转时判断是否在相同页，在就不跳，否则跳转。
            var totalPage;//总页数
            function goPage(pno, psize) {
                var itable = document.getElementById("test");
                var num = itable.rows.length;//表格所有行数(所有记录数)

                pageSize = psize;//每页显示行数
                //总共分几页
                if (num / pageSize > parseInt(num / pageSize)) {
                    totalPage = parseInt(num / pageSize) + 1;
                } else {
                    totalPage = parseInt(num / pageSize);
                }
                var currentPage = pno;//当前页数
                currentPage_ = currentPage;
                var startRow = (currentPage - 1) * pageSize + 1;
                var endRow = currentPage * pageSize;
                endRow = (endRow > num) ? num : endRow;

                $("#test tr").hide();
                for (var i = startRow - 1; i < endRow; i++) {
                    $("#test tr").eq(i).show();
                }

                var tempStr = currentPage + "/" + totalPage;
                document.getElementById("barcon1").innerHTML = tempStr;

                if (currentPage > 1) {
                    $("#firstPage").on("click", function () {
                        goPage(1, psize);
                    }).removeClass("ban");
                    $("#prePage").on("click", function () {
                        goPage(currentPage - 1, psize);
                    }).removeClass("ban");
                } else {
                    $("#firstPage").off("click").addClass("ban");
                    $("#prePage").off("click").addClass("ban");
                }

                if (currentPage < totalPage) {
                    $("#nextPage").on("click", function () {
                        goPage(currentPage + 1, psize);
                    }).removeClass("ban")
                    $("#lastPage").on("click", function () {
                        goPage(totalPage, psize);
                    }).removeClass("ban")
                } else {
                    $("#nextPage").off("click").addClass("ban");
                    $("#lastPage").off("click").addClass("ban");
                }
            }

            function jumpPage() {
                var num = parseInt($("#num").val());
                if (!isNaN(num) && num > 0) {
                    if (num > pageList.pageCount) {
                        num = pageList.pageCount;
                        $("#num").val(num);
                    }
                    initTable(num);
                }
            }

            function detail(jid) {
                $.ajax({
                    url: URL + "seeker/job/detail?jid=" + jid,
                    data: {},
                    type: "get",
                    success: function (result) {
                        if (result.code == 0) {
                            sessionStorage.setItem("job", JSON.stringify(result.data));
                            window.location = "detail.html";
                        }
                    }
                })
            }

            function queryCollect() {
                window.location = "collect.html";
            }

            function queryData() {
                var divHtml;
                var jobDTO = [];
                jobDTO.area = $("#area").val();
                jobDTO.type = $("#type").val();
                jobDTO.salary = $("#salary").val();
                var minSalary;
                var maxSalary;
                var type;
                if ($("#minSalary").val() == null || $("#minSalary").val() == '' || $("#minSalary").val() == 'undefined') {
                    minSalary = 0;
                } else {
                    minSalary = $("#minSalary").val();
                }
                if ($("#maxSalary").val() == null || $("#maxSalary").val() == '' || $("#maxSalary").val() == 'undefined') {
                    maxSalary = 0;
                } else {
                    maxSalary = $("#maxSalary").val();
                }
                if ($("#type").val() == null || $("#type").val() == '' || $("#type").val() == 'undefined') {
                    type = 0;
                } else {
                    type = $("#type").val();
                }
                $.ajax({
                    url: INDEX + "seeker/job/search",
                    data: {
                        "jtId": type,
                        "workAddress": $("#area").val(),
                        "jname": $("#area1").val(),
                        "minSalary": minSalary,
                        "maxSalary": maxSalary
                    },
                    type: "post",
                    success: function (result) {
                        if (result.code == 0) {
                            removeAlltab();
                            for (let i = 0; i < result.data.data.length; i++) {
                                debugger
                                let item = result.data.data[i];
                                divHtml += `<tr style="text-align: center;margin-left:50%">
										<td>
											<div onclick="detail(` + item.jid + `)" class="layui-row">
												<div class="layui-col-md12">
													<div class="layui-card">
														<div id="jName" class="layui-card-header">` + item.jname + `</div>
														<div class="layui-card-body">
															<span style="margin-left: 10%;"  id="address">` + item.workAddress + `</span>
															<span style="margin-left: 50%;" id="salary">` + item.minSalary + '-' + item.maxSalary + `</span>
														</div>
														<div class = "layui-card-foot">
															<span style="margin-left: 10%;" id = "companyName">` + item.cname + `</span>
															<span style="margin-left: 50%;" id = "jobType">` + item.type + `</span>
														</div>
													</div>
												</div>
											</div>
										</td>
									</tr>`
                            }
                            // $("#contain").innerHTML=divHtml;
                            $("#test").append(divHtml);
                        }
                    }
                })
            }

            function removeAlltab() {
                var tab = document.getElementById("test");
                var value = tab.rows.length;
                for (var i = 0; i < value; i++) {
                    tab.rows[0].parentNode.removeChild(tab.rows[0]);
                }
            }

            function getAllTypes() {
                var options = "";
                $.ajax({
                    url: INDEX + "/seeker/job/jobType",
                    data: {"parentId": "0"},
                    type: "get",
                    success: function (result) {
                        if (result.code == 0) {
                            for (let i = 0; i < result.data.length; i++) {
                                let op = result.data[i];
                                options += `<option value="` + op.jtid + `">` + op.jtname + `</option>`
                            }
                            $("#type").append(options);
                        }
                    }
                })
            }

            function login() {
                window.location.href = "../../common/html/login.html";
                window.event.returnValue = false;
            }

            function chat() {
                window.location.href = "package/html/chat.html";
            }

            function toUserPage() {
                window.location.href = "seekers.html";
            }
        </script>
    
    </body>
</html>